import React, {Component} from 'react';
import request from '../../utils/request';
import {stringify} from 'qs';
import {baseServerUrl} from '../../utils/Constant';
// 引入 ECharts 主模块
import echarts from 'echarts/lib/echarts';
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/legend';
import 'echarts/lib/component/title';
import 'echarts/lib/chart/pie';
import SearchForm from "../../components/AutoForm/SearchForm";
import {Card, DatePicker, Spin} from "antd";
import moment from "moment";

const { MonthPicker, RangePicker } = DatePicker;

class EchartsTest extends Component {

  state = {
    isLoading: true,
    searchFields: [{
      cols: [
        {
          md: 8,
          label: '创建时间',
          name: 'createTimeArray',
          component: <RangePicker format="YYYY-MM-DD" />,
        },
      ],
    }],
    searchValues: {},
  };

  handleSearchChange = fields => {
    this.setState({
      searchValues: fields
    })
  };

  handleSearch = ()=>{
    this.setState({
      isLoading: true
    })
    const { searchValues } = this.state;
    let searchParam = {};
    Object.keys(searchValues).map(key => {

      if (key === 'createTimeArray') {
        const dateArray = searchValues[key]['value'];
        if (dateArray && dateArray.length) {
          let startTime = moment(dateArray[0]);
          let endTime = moment(dateArray[1]);
          searchParam[key] = [];
          searchParam[key].push(startTime.format('YYYY-MM-DD'));
          searchParam[key].push(endTime.format('YYYY-MM-DD'));
        }
      }else{
        searchParam[key] = searchValues[key]['value'];
      }
    });

    request(`${baseServerUrl}/tms/report/incomeBar?${stringify(searchParam)}`,{ method: 'GET'}).then(res => {
      this.setState({
        isLoading: false
      })
      const pie = echarts.init(document.getElementById("t2"));
      let part1 = 360/28
      let part2 = 60/5
      let colorList = []
      let tmp
      for(let i = 1;i<=28;i++){
        tmp = (i % 5) * part2 +30
        colorList.push('hsl(' + parseInt(i * part1)+','+tmp+'%,'+tmp+'%')
      }

      let xData = []
      let income = []
      res.result.forEach(d => {
        xData.push(`${d.customName}`)
        income.push({name: d.customName, value: d.feeInSum - d.feeSum})
      })
      pie.setOption({
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
          orient: 'vertical',
          x: 'left',
          data: xData
        },
        color: colorList,
        series: [
          {
            name: '利润',
            type: 'pie',
            selectedMode: 'single',
            label: {
              normal: {
                formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                backgroundColor: '#eee',
                borderColor: '#aaa',
                borderWidth: 1,
                borderRadius: 4,
                rich: {
                  a: {
                    color: '#999',
                    lineHeight: 22,
                    align: 'center'
                  },
                  hr: {
                    borderColor: '#aaa',
                    width: '100%',
                    borderWidth: 0.5,
                    height: 0
                  },
                  b: {
                    fontSize: 16,
                    lineHeight: 33
                  },
                  per: {
                    color: '#eee',
                    backgroundColor: '#334455',
                    padding: [2, 4],
                    borderRadius: 2
                  }
                }
              },
            },
            data: income
          }
        ]
      })
    })
  }

  componentDidMount() {
    this.handleSearch()
  }
  render() {
    return (
      <Card bodyStyle={{padding: 0}}>
        <SearchForm
          header="利润报表"
          layout="inline"
          onFieldsChange={this.handleSearchChange}
          onSubmit={this.handleSearch}
          fields={this.state.searchFields}
          fieldValue={this.state.searchValues}
        />
        {
          this.state.isLoading ? <Spin size="large" style={{ marginLeft:  800}} /> : <div id="t2" style={{ width: "100%", height:  600}}></div>
        }
      </Card>
    );
  }
}

export default EchartsTest;
